<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互联网+护理服务报名表</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px 0;
        }
        
        .container {
            max-width: 750px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 82, 204, 0.15);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%);
            color: white;
            padding: 25px 40px;
            text-align: center;
            position: relative;
        }
        
        header h1 {
            font-size: 32px;
            margin-bottom: 8px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        header p {
            font-size: 16px;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .form-container {
            padding: 30px 40px;
        }
        
        .form-section {
            margin-bottom: 30px;
            border-bottom: 1px dashed #e0e6ed;
            padding-bottom: 25px;
        }
        
        .form-section:last-child {
            border-bottom: none;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #0052cc;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e6f0ff;
        }
        
        .section-title i {
            margin-right: 12px;
            background: #e6f0ff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0052cc;
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px 15px;
        }
        
        .form-group {
            flex: 1 0 calc(50% - 30px);
            margin: 0 15px 20px;
            min-width: 260px;
        }
        
        .form-group.full-width {
            flex: 1 0 calc(100% - 30px);
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #445277;
        }
        
        label.required::after {
            content: " *";
            color: #ff4d4f;
        }
        
        .input-control, textarea, select {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #d9e1ec;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            background: #f8fafc;
        }
        
        .input-control:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #66a3ff;
            box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
            background: white;
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .radio-group {
            display: flex;
            gap: 25px;
            margin-top: 8px;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input {
            margin-right: 8px;
        }
        
        .requirements {
            background: #fff8e6;
            border-left: 4px solid #ffc53d;
            padding: 20px;
            margin: 25px 0;
            border-radius: 0 8px 8px 0;
        }
        
        .requirements h3 {
            color: #ad6800;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .requirements h3 i {
            margin-right: 10px;
        }
        
        .requirements ul {
            padding-left: 24px;
        }
        
        .requirements li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .requirements li:last-child {
            margin-bottom: 0;
        }
        
        .upload-area {
            border: 2px dashed #d9e1ec;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            background: #f8fafc;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: #66a3ff;
            background: #e6f0ff;
        }
        
        .upload-area i {
            font-size: 48px;
            color: #66a3ff;
            margin-bottom: 15px;
        }
        
        .upload-text {
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        .file-info {
            font-size: 14px;
            color: #76839c;
        }
        
        .tech-skills {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .skill-item {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .skill-item input {
            flex: 1;
        }
        
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .btn {
            padding: 14px 36px;
            font-size: 18px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
        }
        
        .btn-submit:hover {
            background: linear-gradient(135deg, #0047b3 0%, #005ce6 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 102, 255, 0.4);
        }
        
        .btn-reset {
            background: #f0f2f5;
            color: #445277;
        }
        
        .btn-reset:hover {
            background: #e4e6eb;
        }
        
        .form-note {
            text-align: center;
            margin-top: 20px;
            color: #76839c;
            font-size: 14px;
        }
        
        .form-note a {
            color: #0066ff;
            text-decoration: none;
        }
        
        .form-note a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .form-group {
                flex: 1 0 calc(100% - 30px);
            }
            
            .form-container {
                padding: 25px 20px;
            }
            
            header {
                padding: 20px;
            }
            
            header h1 {
                font-size: 26px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>互联网+护理服务从业人员报名表</h1>
            <p>请认真填写以下信息，所有带 * 的字段为必填项</p>
        </header>
        
        <div class="form-container">
            <div class="requirements">
                <h3><i class="fas fa-exclamation-circle"></i> 准入要求</h3>
                <p>提供互联网+护理服务的护士应同时具备以下条件：</p>
                <ul>
                    <li>(1) 取得《中华人民共和国执业护士证书》，并能在全国护士电子注册系统中查询；</li>
                    <li>(2) 至少具备5年以上临床护理工作经验；</li>
                    <li>(3) 具备护师及以上职称；</li>
                    <li>(4) 提供居家专科护士服务的护士和开展互联网线上护理专科门诊的护士应取得省级及以上相关专科护士培训合格证明，或具有主管护师及以上技术职称并在相关专科工作3年以上；</li>
                    <li>(5) 无违反相关法律法规记录及不良执业行为记录。</li>
                </ul>
            </div>
            
            <form id="nursing-form">
                <!-- 基本信息 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-user"></i>
                        <h2>基本信息</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">姓名</label>
                            <input type="text" class="input-control" placeholder="请输入您的姓名" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">身份证号码</label>
                            <input type="text" class="input-control" placeholder="请输入18位身份证号码" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">性别</label>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="male" name="gender" value="male" required>
                                    <label for="male">男</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="female" name="gender" value="female">
                                    <label for="female">女</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">年龄</label>
                            <input type="number" class="input-control" min="18" max="65" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">电话号码</label>
                            <input type="tel" class="input-control" placeholder="请输入11位手机号码" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">电子邮箱</label>
                            <input type="email" class="input-control" placeholder="用于接收通知" required>
                        </div>
                    </div>
                </div>
                
                <!-- 职业信息 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-briefcase"></i>
                        <h2>职业信息</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">医疗机构</label>
                            <input type="text" class="input-control" placeholder="工作单位名称" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">科室</label>
                            <input type="text" class="input-control" placeholder="所在科室" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">专业</label>
                            <input type="text" class="input-control" placeholder="您的专业方向" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">学历</label>
                            <select class="input-control" required>
                                <option value="">请选择学历</option>
                                <option value="doctor">博士</option>
                                <option value="master">硕士</option>
                                <option value="bachelor">本科</option>
                                <option value="college">大专</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">职业</label>
                            <select class="input-control" required>
                                <option value="">请选择职业</option>
                                <option value="nurse">护士</option>
                                <option value="doctor">医生</option>
                                <option value="therapist">治疗师</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">职称</label>
                            <select class="input-control" required>
                                <option value="">请选择职称</option>
                                <option value="primary">初级</option>
                                <option value="nurse">护师</option>
                                <option value="senior">主管护师</option>
                                <option value="associate">副主任护师</option>
                                <option value="professor">主任护师</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>职务</label>
                            <input type="text" class="input-control" placeholder="如护士长、主任等">
                        </div>
                        
                        <div class="form-group">
                            <label class="required">工作年限</label>
                            <input type="number" class="input-control" min="1" max="50" required>
                        </div>
                    </div>
                </div>
                
                <!-- 证书信息 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-file-certificate"></i>
                        <h2>证书信息</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">执业资格证编号</label>
                            <input type="text" class="input-control" placeholder="护士执业证书编号" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">技术资格证编号</label>
                            <input type="text" class="input-control" placeholder="专业技术资格证书编号" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label class="required">获得证书时间</label>
                            <input type="text" class="input-control" placeholder="例如：2020年5月获得护师资格证书" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">是否为专科护士</label>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="specialty-yes" name="specialty" value="yes" required>
                                    <label for="specialty-yes">是</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="specialty-no" name="specialty" value="no">
                                    <label for="specialty-no">否</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">是否为师资人选</label>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="teacher-yes" name="teacher" value="yes" required>
                                    <label for="teacher-yes">是</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="teacher-no" name="teacher" value="no">
                                    <label for="teacher-no">否</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>能级</label>
                            <select class="input-control">
                                <option value="">请选择能级</option>
                                <option value="N0">N0</option>
                                <option value="N1">N1</option>
                                <option value="N2">N2</option>
                                <option value="N3">N3</option>
                                <option value="N4">N4</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label>培训项目</label>
                            <input type="text" class="input-control" placeholder="参加过的培训项目">
                        </div>
                    </div>
                </div>
                
                <!-- 照片上传 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-camera"></i>
                        <h2>照片上传</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label class="required">一寸证件照</label>
                            <div class="upload-area" id="upload-area">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <div class="upload-text">点击或拖拽上传一寸证件照</div>
                                <div class="file-info">支持 JPG/PNG 格式，大小不超过 2MB</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 技术特长 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-star"></i>
                        <h2>技术特长</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label class="required">技术特长（基础护理除外）</label>
                            <p class="file-info">请按照技术特长由高往低逐一罗列（最多十项）</p>
                            <div class="tech-skills">
                                <div class="skill-item">
                                    <span>1.</span>
                                    <input type="text" class="input-control" placeholder="您的首要技术特长" required>
                                </div>
                                <div class="skill-item">
                                    <span>2.</span>
                                    <input type="text" class="input-control" placeholder="您的次要技术特长" required>
                                </div>
                                <div class="skill-item">
                                    <span>3.</span>
                                    <input type="text" class="input-control" placeholder="您的其他技术特长">
                                </div>
                                <div class="skill-item">
                                    <span>4.</span>
                                    <input type="text" class="input-control" placeholder="您的其他技术特长">
                                </div>
                                <div class="skill-item">
                                    <span>5.</span>
                                    <input type="text" class="input-control" placeholder="您的其他技术特长">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 个人简介 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-file-alt"></i>
                        <h2>个人简介</h2>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label class="required">个人简介</label>
                            <textarea class="input-control" placeholder="请按照院内医护人员介绍栏形式填写个人简介（200-500字）" required></textarea>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label class="required">个人通讯地址</label>
                            <input type="text" class="input-control" placeholder="详细通讯地址" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>延续护理"互联网+护理服务"从业人员岗前培训合格证书编号</label>
                            <input type="text" class="input-control" placeholder="与AnfineID一致">
                        </div>
                    </div>
                </div>
                
                <div class="btn-container">
                    <button type="submit" class="btn btn-submit">
                        <i class="fas fa-paper-plane"></i> 提交申请
                    </button>
                    <button type="reset" class="btn btn-reset">
                        <i class="fas fa-redo"></i> 重置表单
                    </button>
                </div>
                
                <div class="form-note">
                    <p>我们承诺保护您的个人信息安全，详情请阅读<a href="#">隐私政策</a></p>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 上传区域交互效果
            const uploadArea = document.getElementById('upload-area');
            
            if (uploadArea) {
                uploadArea.addEventListener('click', function() {
                    alert('照片上传功能将在此处实现');
                });
                
                uploadArea.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.style.borderColor = '#66a3ff';
                    this.style.backgroundColor = '#e6f0ff';
                });
                
                uploadArea.addEventListener('dragleave', function() {
                    this.style.borderColor = '#d9e1ec';
                    this.style.backgroundColor = '#f8fafc';
                });
                
                uploadArea.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.style.borderColor = '#d9e1ec';
                    this.style.backgroundColor = '#f8fafc';
                    alert('照片上传功能将在此处实现');
                });
            }
            
            // 表单提交处理
            const form = document.getElementById('nursing-form');
            
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 实际应用中应在此处添加表单验证
                    const isValid = true;
                    
                    if (isValid) {
                        // 显示成功消息
                        alert('报名表提交成功！我们将尽快审核您的申请。');
                        
                        // 在实际应用中，这里可以添加AJAX提交
                        // form.submit();
                    }
                });
            }
        });
    </script>
</body>
</html>